	
	.top-status{
		padding: 18rpx 70rpx 10rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 32rpx;
		color: #FF4A4A;
		line-height: 44rpx;
		background: #FFFFFF;
		text-align: center;
		.wait-pay{
			color: #333333;
			text{
				color: #FF4A4A;
				padding: 0 10rpx;
			}
		}
	}
	.order_detail_page{
		min-height: 100vh;
		background-color: #f7f7f7;
	}
	
	.detail_content{
		box-sizing: border-box;
		padding: 0 22rpx 20rpx;
	}
	
	.order-status{
		border-radius: 20rpx;
		background-color: #fff;
		padding: 34rpx 18rpx 0rpx;
		margin-top: 20rpx;
		position: relative;
		.Info{
			position: absolute;
			top: 32rpx;
			right:28rpx;
			display: flex;
			align-items: center;
			text{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
			image{
				width: 11rpx;
				height: 20rpx;
				margin-left: 12rpx;
			}
		}
	}

	
	
	.order_item_box{
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 28rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	
	.proof_image{
		width: 160rpx;
		height: 160rpx;
		margin-right: 10rpx;
		border-radius: 20rpx;
	}
	
	.proof_image:last-child{
		margin-right: 0rpx;
	}
	
	.call_address_box{
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			width: calc(100% - 160rpx);
		}
		.right{
			.edit-address{
				width: 116rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #FF4A4A;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF4A4A;
				line-height: 48rpx;
			}
		}
	}
	
	
	.call_address>text{
		margin-right: 16rpx;
	}
	
	.call_deatil_address{
		margin-top: 20rpx;
		text-align: justify;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
	}
	
	.call_user{
		font-size: 26rpx;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}
	
	.call_user>text{
		margin-right: 20rpx;
	}
	
	.pin-box{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 34rpx 22rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.user-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.avatar{
				display: flex;
				align-items: center;
				.mine{
					image{
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
					}
				}
				.p-user{
					margin-left: 52rpx;
					display: flex;
					image{
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						&:not(:first-child){
							margin-left: -18rpx;
						}
					}
				}
			}
			.time{
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				text{
					font-weight: Regular;
				}
			}
		}
		.btn{
			margin-top: 32rpx;
			button{
				width: 100%;
				height: 82rpx;
				background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 82rpx;
			}
		}
	}
	
	
	.goods-box{
		background: #FFFFFF;
		border-radius: 20rpx;
		.g-item{
			.btn{
				display: flex;
				justify-content: flex-end;
				padding: 32rpx 20rpx 40rpx;
				box-sizing: border-box;
				button{
					&:not(:first-child){
						margin-left: 12rpx;
					}
					&.red{
						width: 180rpx;
						height: 68rpx;
						background: #FFFFFF;
						border-radius: 38rpx 38rpx 38rpx 38rpx;
						border: 2rpx solid #E72A2A;
						font-weight: 400;
						font-size: 30rpx;
						color: #E72A2A;
						line-height: 68rpx;
					}
					&.black{
						width: 180rpx;
						height: 68rpx;
						background: #FFFFFF;
						border-radius: 38rpx 38rpx 38rpx 38rpx;
						border: 2rpx solid #B4B4B4;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						line-height: 68rpx;
					}
				}
			}
		}
	}
	
	
	.service_image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
	}
	
	.service_content{
		flex: 1;
		margin-left: 24rpx;
		font-weight: bold;
		height: 100%;
	}
	
	.service_top{
		font-size: 34rpx;
	}
	
	.service_top_name{
		width: 266rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
		line-height: 48rpx;
	}
	
	.service_top_price_box{
		color: #FF2E2E;
	}
	
	.service_top_price_icon{
		
	}
	
	.service_top_price{
		font-size: 40rpx;
	}
	
	.service_bottom{
		font-size: 28rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	
	.service_bottom_name{
		width: 294rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}
	
	.service_bottom_num{
		
	}
	
	.service_item{
		margin-bottom: 30rpx;
		align-items: flex-start;
	}
	
	.service_item:last-child{
		margin-bottom: 0rpx;
	}
	
	.service_item_name{
		font-size: 30rpx;
	}
	
	.service_item_price{
		width: 70%;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
		line-height: 42rpx;
		text-align: right;
	}
	
	
	.order_remark{
		width: 400rpx;
		text-align: right;
	}
	
	.item_btn_box{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		padding: 20rpx 22rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		box-sizing: border-box;
		background-color: #FFFFFF;
		.w-180{
			width: 180rpx;
			height: 68rpx;
			
		}
		.w-270{
			width: 270rpx;
			height: 68rpx;
		}
		button{
			background: #FFFFFF;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 68rpx;
			&:not(:first-child){
				margin-left: 20rpx;
			}
			&.black-btn{
				border: 2rpx solid #B4B4B4;
				color: #333333;
			}
			&.red-btn{
				border: 2rpx solid #E72A2A;
				color: #E72A2A;
			}
			&.c-btn{
				background: linear-gradient( 92deg, #FFA233 0%, #FB4C4C 100%);
				color: #FFFFFF;
			}
		}
	}
	
	
	.pay-box{
		.top{
			padding: 48rpx 22rpx 0;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.price{
			padding: 85rpx 0 0;
			.num{
				text-align: center;
				font-weight: 900;
				font-size: 68rpx;
				color: #FF2E2E;
				line-height: 68rpx;
				text{
					font-weight: 400;
					font-size: 30rpx;
				}
			}
		}
		.pay-type{
			padding: 83rpx 22rpx 0;
			.item{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				&:not(:first-child){
					margin-top: 58rpx;
				}
				.left{
					display: flex;
					align-items: flex-start;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					.name{
						display: flex;
						flex-direction: column;
						text{
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							line-height: 48rpx;
							margin-left: 16rpx;
							&:nth-child(2){
								font-weight: bold;
								font-size: 26rpx;
								color: #000000;
								line-height: 36rpx;
								margin-top: 6rpx;
							}
						}
					}
				}
				.right{
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.btn{
			padding: 92rpx 30rpx 20rpx;
			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
			// background: #FFFFFF;
			.b-box{
				width: 100%;
				height: 96rpx;
			}
			button{
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 90deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
	
.cancel-box{
	
	.title{
		padding: 36rpx 0 0;
		position: relative;
		&>text{
			display: block;
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
			line-height: 52rpx;
			text-align: center;
		}
		&>image{
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			right: 30rpx;
			top: 46rpx;
		}
	}
	.list{
		margin-top: 30rpx;
		overflow-y: auto;
		height: 580rpx;
		padding: 40rpx 22rpx 0;
		box-sizing: border-box;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			.text{
				width: calc(100% - 60rpx);
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				line-height: 42rpx;
			}
			.r-img{
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.btn{
		padding: 12rpx 20rpx 0;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
		margin-top: 60rpx;
		button{
			width: 346rpx;
			height: 96rpx;
			border-radius: 80rpx 80rpx 80rpx 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 96rpx;
			&.b-1{
				border: 2rpx solid #E72A2A;
				color: #E72A2A;
				background: #FFFFFF
			}
			&.b-2{
				background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
				color: #FFFFFF;
			}
		}
	}
	&.cui{
		.content{
			padding: 180rpx 0 120rpx;
			&>image{
				width: 200rpx;
				height:200rpx;
				margin: 0 auto;
			}
			&>view{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				text-align: center;
				margin-top: 22rpx;
			}
		}
		.btn{
			button{
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx;
				color: #FFFFFF;
			}
		}
	}
}
